import { Modal } from 'antd';
import React, { useState } from 'react';

function ReadOnlyModal({ trigger, children, ...rest }) {
  const [visible, setVisible] = useState(false);

  const clickableTrigger = React.cloneElement(trigger, {
    onClick: () => setVisible(true),
  });

  return (
    <>
      {clickableTrigger}
      <Modal visible={visible} onCancel={() => setVisible(false)} footer={null} {...rest}>
        {visible ? children : null}
      </Modal>
    </>
  );
}

export default ReadOnlyModal;
